%!TEX root = ../report.tex

\section{Introduction}

This report has been written within the scope of the course Designing User Experiences at the University of Bremen during the Sommersemester 2010. 
Its purpose is the summarization of the main aspects and topics that appeared during the project work. It should illustrate the development process, as well as pointing out the difficulties and solutions, which have been elaborated by the group.\\
% 
% Dieses Dokument wurde im Rahmen der Veranstaltung *Designing User Experiences* im SS 2010 an der Universität Bremen erstellt. 
% 
% Es dient der abschließenden Zusammenfassung der wichtigeren Aspekte und Themen mit denen sich die Arbeitsgruppe beschäftigt hat und soll sowohl den Entwicklungsprozess verdeutlichen, als auch Schwierigkeiten und Lösungsansätze, die eigenständig durch die Projektgruppe erarbeitet wurden, aufzeigen.
 % 
 % Des Weiteren wird im Rahmen dieses Dokuments die Entscheidungsfindung der Projektgruppe auf Grundlage empirischer, wissenschaftlich aufbereiteter Ergebnisse vorgestellt.

 % Einen weiteren Schwerpunkt in diesem Dokument bildet die Auseinandersetzung mit dem Three20 Framework, welches nicht nur aus technischer Sicht behandelt wird. Es wird unter anderem darauf eingegangen wie die geeignete Wahl eines technischen Hilfsmittels das User Experience Design unterstützen und ein Endergebnis optimieren kann.
At this point it should be mentioned that the group's focus lied on the development for a good user experience. From this follows that each function and design element has been discussed in detail, instead of implementing as many functions as possible.
Adding functionality to an application is not that difficult, but doing it in a way that the user can control the app intuitively is far more complex.\\

The report starts with the elaboration of the requirements. The persona Peter Scholar will be introduced and also how he helped us to evaluate our scenarios and design.
Afterwards, the main design decisions will be examined. In the end a short summary will be given.

% 
% An dieser Stelle soll noch einmal darauf hingewiesen werden, dass der Fokus auf dem User Experience Design und nicht auf einer fertigen und verkaufsfähigen Anwendung liegt. Die Projektgruppe hat viel Wert darauf gelegt jedes verwendete Element soweit wie möglich durchzusezieren, anstatt viele Funktionen halbherzig einzubauen, und es im Gegenzug hingenommen auf einen Prototypen der Anwendung hinzuarbeiten. 
% 
% Es ist relativ einfach Funktionalität zu einer Anwendung hinzuzufügen und diese unkontrolliert wachsen zu lassen. Die Schwierigkeit bei einem guten User Experience Design liegt darin das Wesentliche herauszufiltern, sich darauf zu konzentrieren und es so gut wie möglich zu realisieren.  
%
% Das beste User Experience Design entsteht, wenn man so viel wie möglich reduziert hat, ohne dabei die Grundfunktionalität einzuschränken. Die Kunst darin wiederum liegt einen geeigneten Mittelweg zu finden, um die größtmögliche geplante Zielgruppe anzusprechen ohne das Interface zu überladen. Dies gilt insbesondere für Anwendungen wie Stud.IP, welches bereits in der jetzigen Form als Web-Interface stark unter der Usability leidet, da es mit der Zeit immer stärker gewachsen und unübersichtlicher geworden ist.


%system überblick mit api

\section{Requirements}

This section illustrates the process of determining the requirements of the app, the scenarios and views.

As mentioned in the introduction, the Stud.IP system has a lot of functionality and is hardly usable on mobile devices due to the low screen resolution. Thus, the main goal to create this app lies in the improvement of the user interface.\\

According to the slides ``we have to understand user's goals, needs, and motivations''. Therefore, it is important to figure out what the essential requirements of a mobile Stud.IP system are. Possibly, some features should be limited or excluded in order to keep the app clearly arranged and thus easily usable.\\

Another quote from the slides perfectly illustrates the main intention of our app.
\begin{quotation}
It‘s not about creating products that allow us to do something new, but about allowing us to do what we already do but better, more often, in more places, and more quickly.
\end{quotation}

However, the first step is to identify the requirements. Therefore, we used a technique called Persona.
\subsection{Persona}

Persona is a technique to represent customer as communities with coherent identity\footnote{http://en.wikipedia.org/wiki/Persona\_(marketing)}, which has been adopted by Allan Cooper in the domain of software engineering.
Personas are model users that the team creates to help understanding the goals, motivations and behaviors of the people who will use the system.
A persona is a fictional character representing an end-user of the software-system. One characteristic of a persona is that it is described as a real living person and thus has its own identity.\\

In this case the persona has been used to identify our requirements by imagining how he will use the system and which elements are important in his perspective.\\

By using the persona approach we do avoid the risk of designing an interface that only we can use. According to J. Spool\footnote{http://www.uie.com/articles/benefits\_of\_personas/} any tools that help designers to prevent the natural behavior of grounding helps them to attack the design more objectively with their target user in mind.\\
		
	
%usually more personas	
	
\subsubsection{Peter Scholar}
We named our persona Peter Scholar. He is a 22 year old economics student at the University of Bremen, who uses Stud.IP as information-system to organize the education. In every sense Peter is a typical student.\\
	
Usually, Peter uses the PC during his studies or for social media like Facebook. He is not that interested in gaming. Not long ago, Peter bought an iPhone. Mainly, because of the internet flatrate, which helps him to be up-to-date at any time and to organize his task and events.\\
	
	Peter visits Stud.IP several times a day to stay in tune. For instance he checks, if any events have been rescheduled or canceled to save himself the trip to the lecture hall. However, Peter noticed that the Stud.IP website is hardly usable on his iPhone and he has difficulties to quickly reach the desired information. Furthermore, he is annoyed that he could only see the information when he has mobile internet. He wishes there would be an App especially for the iPhone, which allows quick access to Stud.IP and helps him to find the desired information.
	
	
	
	% Typical Scenarios
	% Where do I have to go? Timetable, Lectures
	% Peter visits a lecture and wants to enroll himself as a participant
	% What's new in my courses?
	% Do I have new messages in my inbox?
	% % 	
	
	\subsection{Scenarios}
	After bringing Peter Scholar to life the next step involves discovering what he would expect from the app.
	In a group discussion five main tasks have been determined:
	\begin{itemize}
		\item Where do I have to go when? 
 		\item Peter visits a lecture and wants to enroll himself as a participant.
		\item What is new in my courses?
		\item Information about a particular course.
		\item Do I have new messages in my inbox?
	\end{itemize}
	
	In the next step we redefined the tasks as concrete scenarios. Although the scenarios represent a concrete flow, they do not describe any design elements. For instance, the fifth step of the following scenario  does not describe how Peter selects the entry. It is imaginable that  there is a detail button, that the complete entry is a button or even that some kind of gesture performs the selection like wiping the entry. 
	However, these scenarios basically focus on functionality than design, notwithstanding that some design elements will be roughly mentioned like a list in the second step.
	
	\begin{enumerate}
		\item Peter would like to have an overview of what has happened in his courses.
		\item Peter selects ``News''.
		\item A listview appears.
		\item Peter notices a new file has been uploaded in the course Designing User Experiences.
		\item He selects the entry to receive further information about the file.
		\item Afterwards, he navigates back to the news overview. The entry has been marked as read and will not be displayed anymore.
		\item The other news are not important for Peter. Hence he marks them all as read.
		\item Peter is informed and returns to his business.
	\end{enumerate}
	
	
	\subsection{Prototyping}
	An important aspect while designing for user experience is a constant evaluation of the design, hence we started as early as possible with Prototyping and Usability-Testing.\\
	
	Prototyping helped us to visualize and explore our ideas as soon as possible. For instance, we argued a lot about the Startscreen  and how the user should navigate through the app, a lot of these thoughts will be discussed later in this document, because this represents the rationale of our work. \\
	
	First we started with horizontal low-fidelity mock-up prototyping. During a design session we used a chalkboard, where each group-member could express the way he would realize the scenario.
	Afterwards, we discussed the views and improved, merged or rejected views until we reached a version that satisfied every group members and especially the needs of Peter.\\
	
In the next step we digitalized the views and added more details to them. An example of a prototype view can be found in Figure \ref{fig:figures_prototypeNews}. It shows the prototype for the news overview mentioned in the previous scenario.  
	
	\begin{figure}[htbp]
		\centering
			\includegraphics[height=3in]{figures/prototypeNews.png}
		\caption{Mock-up prototype news overview}
		\label{fig:figures_prototypeNews}
	\end{figure}

While designing the prototypes, we compared our views with the standard interface of Stud.IP and thus designed the views as they should be, not as they currently are.\\
Besides the views we also discussed the app flow, which describes the way the user navigates from view to view.

\section{Navigation}

Navigation diagrams are typically used to model the interactions that users have with our software.
They enable you to gain a high-level overview of the user interface for your application.
Because user interface-flow diagrams offer a high-level view of the interface of a system, you can quickly gain an understanding of how the system is expected to work\footnote{http://www.agilemodeling.com/artifacts/uiFlowDiagram.htm}.\\

Hence, the navigation diagram helps to evaluate the overall flow of your application’s user interface. For example, does the flow make sense?
In Figure \ref{fig:figures_Navigationsdiagram} the flow of the Stud.IP app is illustrated.

Obviously, the application is organized in a tree-like structure. After the login, which should be done only once the startscreen is shown. From this view the user can access all main functions of the application like news, messages, courses and the timetable.\\

Furthermore, the user has the ability to directly access a particular course, this concept is illustrated in \ref{sec:shortcuts}. Actually, this concept has proven itself successfully, hence we extended it to other views. For instance, the user can create a shortcut to a particular message as well.\\

Besides the shortcuts it turns out that direct links from news events to the corresponding course view is also important. 
Additionally, the user should be able to navigate the same way back in which he access the screens. This means, if he access the files view of a particular course over the news view, he should also get back to the news instead to the course view. This is important, because the app should feel consistent, otherwise the user gets confused.\\

In summary, the chosen navigation flow of the app allows the user to access each part of the app within a few steps. The most screens can be reached within three steps.\\

\begin{figure}[htbp]
	\centering
		\includegraphics[width=.9\textwidth]{figures/Navigationsdiagram.pdf}
	\caption{Navigation diagram}
	\label{fig:figures_Navigationsdiagram}
\end{figure}


	
\section{Design}
This section examines the process of designing the several views. The main design decisions and thoughts will be pointed out, especially the rationale behind specific decisions will be discussed.\\

At first the startscreen will be discussed, after that the feature to place shortcuts and why we implemented this feature. In the end the design rationale for the views news and courses will be examined. 

\subsection{Startscreen}
The startscreen is a perfect example, because it is the central view of the application. Actually, the term startscreen is a little bit irritating because it is not only the first screen which the user sees and from which it navigates to every other screen, but it is also the vanishing point and the central screen of the app.
Obviously, this is the view, which will be most recognized by the user.

% In diesem Abschnitt soll erläutert werden, wie die Arbeitsgruppe zu dem momentanen Zustand des Eingangsbildschirms gekommen ist, welche Entscheidungen getroffen wurden und aus welchen Gründen bestimme Prozesse eingeleitet wurden.
% 
% Der Eingangsbildschirm eignet sich insbesondere für die hiesige Diskussion, da es ein zentrales Element der gesamten Anwendung ist und nicht nur als Start- sondern als auch Flucht-, sowie Anlaufpunkt für den Anwender dient. Es ist schlussendlich die Ansicht, die vom Anwender am meisten wahrgenommen und verwendet wird.

At first the different approaches, their advantages and disadvantages and the reason why they have been rejected will be discussed.
Afterwards, the reason for the actual design, textures and colors will be discussed, especially the reason why we used a wooden texture and how skeumorphism could enhance the experience.
% Zu Anfang wird darauf eingegangen welche verschiedenen Ansätze zur Auswahl standen, welche Vor- und Nachteile diese haben, und warum sie als nicht optimal im Fall der Anwendung Stud.IP eingestuft worden sind.
% 
% Nachfolgend wird darauf eingegangen was dazu geführt hat, dass die aktuelle Ansicht ein holzähnliches Look \& Feel aufweist und wie man mit Hilfe von Skeuomorphismen das Benutzererlebnis aufwerten kann. 
In the end, this section deals with the different semantical meanings of icons and their influence on the user experience by surrogating meanings.
% 
% Abschließend wird in diesem Abschnitt auf die Semantik verschiedener Symbole eingegangen und wie diese die User Experience beeinflussen, indem sie Anwendern bestimmte Bedeutungen und Ziele suggerieren.	
% 	
	
	\subsubsection{Different navigation approaches}
	

Basically, the iPhone SDK provides different approaches to navigate between views. 
Navigation is an important aspect, especially for a mobile device like the iPhone with very limited screen size. This is because there is less space on the screen for navigation elements, but at the same time these elements have to be large enough to enable a comfortable multi-touch experience. Hence, it is important that the navigation focuses on the relevant functions and is not confusing or overcharged.\\ 
% 
% Grundsätzlich bietet das iPhone User Interface verschiedene Möglichkeiten um zwischen verschiedenen Bildschirmen zu navigieren.
% 
% Dies ist insbesondere auf dem iPhone (im Vergleich zu Desktop User Interfaces) ein relevanter Aspekt, da man auf einem mobilen Gerät im Allgemeinen viel weniger Platz hat um User Interface Elemente zu positionieren und sich dementsprechend auf das Relevante konzentrieren muss, um die aktuelle Ansicht nicht mit unnötigen, störenden Objekten zu überfrachten.

Besides the appealing and clear look of the navigation elements, context has also an important role. For instance, a typical desktop computer-screen provides more information about the context of the application. In addition to the actual application there are popup windows or dialogues next to the main window or complex menu structures. However, mobile devices lack of this additional information.
% 
% In Bezug zu der Navigation spielt auch der Kontext eine entscheidende Rolle. Während man auf einem relativ großen Monitor, welcher zu einem Desktop-System (oder Laptop) gehört, zusätzlich zu der aktuellen Anwendung einen entsprechenden Kontext ausfindig machen kann, indem man auf Bereiche neben dem Fenster oder dauerhaft vorhandene Interface-Elemente wie eine Menü- oder Taskleiste blickt, hat man auf einem mobilen Gerät keinen Ankerpunkt.

Although there is a permanently visible statusbar, this statusbar only shows information that are not for purpose in the context of the current application like the carrier or time. These information  correspond to the device as a whole and not to a particular application.\\
Providing the user with contextual information and by doing so giving him a feeling of secureness, is an important question during the design process.\\
% 
% 
% Die dauerhaft vorhandene Statusbar zeigt in den meisten Fällen lediglich kontextirrelevante Informationen wie den Netzbetreiber oder die aktuelle Uhrzeit an, welche sich auf das Gerät als ganzes, nicht jedoch auf die aktuell laufende Anwendung, beziehen. Um einem Anwender den aktuellen Kontext zu präsentieren und ihm somit das Gefühl von Sicherheit zu geben, muss man daher zu Hilfsmitteln greifen.

% Eine erste typische Möglichkeit für eine kontextbezogene Navigation ist die Navigation Bar:

A first example for a typical context-based navigation is the navigation bar:

\begin{figure}[htbp]
	\centering
		\includegraphics[width=.9\textwidth]{figures/apple_navigation_interface.jpg}
	\caption{Navigation interface, source: iPhone OS Reference Library, Apple}
	\label{fig:figures_apple_navigation_interface}
\end{figure}

The navigation bar allows you to manage the navigation like a stack, which means that new views will be pushed upon the stack when you navigate to them and removed when you navigate backwards to your origin.
The navigation bar is generally displayed at the top of the navigation and usually provides two significant statements:
	% 
	% Bei einer Navigation Bar navigiert man von einer übergeordneten Menge zu einer immer spezifischeren Teilmenge ohne dabei den Kontext zu verlieren. Im oberen Bereich des Bildschirms wird dauerhaft eine Navigationsleiste angezeigt, welche meistens zwei wichtige Informationen enthält:

\begin{enumerate}
	\item The title of the view (current position)
	\item A named back-button (previous position)
\end{enumerate}
	 % 1. Den Titel des Bildschirms (aktuelle Position)
	 % 2. Einen benannten Zurück-Button (vorherige Position)

As illustrated in Figure \ref{fig:figures_apple_navigation_interface} the navigation bar shows the title of the current view and the title of the previous view. So the user always knows about the present and the past. But besides that, there is also an information about the future, represented by the table view in the content area, which shows his further navigation possibilities.\\
Imagine the navigation interface as a timeline, providing the user with information from the past to the future.\\

% 
% Darüber hinaus existiert im Bereich darunter, wie auf dem Bild zu sehen, eine Tabelle, welche den Kontextbezug in Richtung Teilmenge herstellt. Somit weiß ein Anwender immer wo er sich gerade befindet, wie er einen Schritt zurück kommt und welche Schritte existieren um genau einen Schritt weiter zu gehen. Auf einer Zeitachse gesehen gibt ein Navigation Interface dem Anwender kontextuelle Informationen über die Vergangenheit und Zukunft.

The advantage of the navigation interface is obviously the possibility to display a lot of elements in a table, each providing a different navigation path. This type of interface provides adequate context information and is highly scalable, especially in the vertical direction (a lot of elements on the same layer).\\

% Ein Navigation Interface hat den Vorteil, dass man sehr viele Elemente in einer Tabelle platzieren kann, die unterschiedlichste Ausgangspunkte in der fortführenden Navigation bewirken können. 
% 
% Diese Form des Interfaces bietet für ein derartig kleines Gerät, wie das iPhone, viele Kontextinformationen und es skaliert sehr gut in der Vertikalen (flachere Hierarchie, viele Elemente auf einer Ebene).


However, a disadvantage is a complicated navigation in case of highly nested representation of information.
	
% Ein Nachteil ist jedoch die umständliche Navigation bei einer stärker verschachtelten Darstellung von Informationen. 

As the user dives deeper into the app, the chances that he feels lost increases and it is more difficult for him to find a comfortable starting point.\\

% 
% Je tiefer die Hierarchie, desto verlorener fühlt sich der Anwender und desto schwieriger ist es für ihn einen sicheren Ausgangspunkt in einer Anwendung zu finden. 

This is particular important when the user tries to navigate to an unknown view or accidentally navigates to the wrong view and wants to return to the origin.
A good experience means that the user always finds a ``good'' starting point and can use the app the way he wants to and not vice versa. An application should only force the user to use it in a specific way as rarely as possible and instead giving him a lot of flexibility, but at the same time subtly guide him through the program.\\ 

% Dies ist insbesondere dann wichtig, wenn der Anwender zu einem ihm bisher unbekannten Ort navigiert hat oder einen Fehler durchgeführt hat und zum Anfang zurückkehren möchte um den von ihm eingeprägten Prozess eines Anwendungsfalls komplett zu wiederholen. Gutes User Interface Design bedeutet, dass ein Anwender immer einen Einstiegspunkt findet um *seine Art des Umgangs mit einer Anwendung* dem Programm aufzwingen zu können. Eine Anwendung hingegen sollte dem Anwender so selten wie möglich bestimmte Prozesse aufzwingen und somit den Benutzer einschränken und sein Erlebnis schwächen.

Another possibility is the so called tab bar, as illustrated in Figure \ref{fig:figures_apple_tabbar_controllerviews}.
	% Eine weitere Möglichkeit eine Navigation zu gestalten ist eine Tab Bar, wie man sie auf dem nachfolgenden Bild sieht:
	
\begin{figure}[htbp]
	\centering
		\includegraphics[width=.9\textwidth]{figures/apple_tabbar_controllerviews.jpg}
	\caption{Tab Bar Interface Source: iPhone OS Reference Library, Apple}
	\label{fig:figures_apple_tabbar_controllerviews}
\end{figure}

Generally, a tab bar is always visible at the bottom of the app and thus presents even more contextual information then the navigation bar. Nevertheless, this approach has two disadvantages:
	% 
	% Eine Tab Bar befindet sich grundsätzlich immer sichtbar im unteren Bereich der Anwendung und präsentiert dem Anwender somit noch stärkere Kontextinformationen als eine Navigation Bar. Sie hat jedoch zwei gravierende Nachteile:

\begin{enumerate}
	\item Permanently visible
	 % 1. Dauerhafte Präsenz auf dem Bildschirm
	\item Does not scale
	 % 2. Schlechte Skalierung
\end{enumerate}	

A tab bar is relatively high compared to the small size of the display. As a consequence there is less space for content.  From a designer's viewpoint you should deliberate about wether using a different approach, if you want to display a lot of content. 
A further drawback is that the tab bar is limited to the amount of icon that it can display. If you add more than five items to the bar, it will automatically insert a ``More'' view controller button to handle the display of the additional items. They will be displayed in an additional view requiring a lot more user interaction to get to the desired function.\\

% Eine Tab Bar ist relativ hoch und verbraucht auf dem bereits kleinen Display einen nicht unerheblichen Teil. Daher sollte man vor ihrer Verwendung gut abwägen, ob es nicht eine besseren Lösungsansatz für die gegebene Navigation gibt.
 % 
% Ein zweiter gravierender Nachteil ist die schlechte Skalierung. Zwar kann man per Tab Bar beliebig viele Punkt ansteuern, jedoch können nur maximal vier Punkte dauerhaft sichtbar für den Anwender dargestellt werden.

% Alle Navigationselemente, die darüber hinaus gehen, müssen kompliziert über einen ``Mehr''-Button angesteuert werden und erfordern viele Interaktionsschritte von Seiten des Anwenders, die wiederum die User Experience verschlechtern. 

In summary, the tab bar fits perfectly for apps, which have four to five semantically distinguishable areas that should be accessible at any time.
For instance, the clock app shown in Figure~\ref{fig:figures_apple_tabbar_controllerviews} is a good example, because an alarm has a different functionality then a stopwatch, although both have the concept of a clock in common.\\

% Eine Tab Bar ist somit sehr gut für Anwendungen geeignet, welche vier semantisch unterschiedliche Bereiche besitzen, die am besten dauerhaft angesteuert werden können. 

% Das Bild, welches die Uhr des iPhones darstellt, ist ein sehr gutes Beispiel. Ein gesetzter Alarm ist etwas anderes als eine Stoppuhr, jedoch haben beide eins gemeinsam: die Uhr als übergeordnetes semantisches Element. Es existiert kein direkter Bezug zwischen beiden Objekten, dieser kann lediglich über das übergeordnete Element stattfinden.

In general, the tab bar could be exchanged with a navigation interface, displaying four elements in a table, instead of a black bar at the bottom. However, the tab bar should be favored, if each part of the app should be accessible at any time independent of the current context .\\

% Eine Tab Bar kann grundsätzlich auch in einem Navigation Interface abgebildet werden, welches zum Beispiel vier Elemente in einer Tabelle anzeigt. Sie ist jedoch in Fällen vorzuziehen, in denen alle Elemente dauerhaft, unabhängig von dem aktuellen Kontext in der Anwendung, angezeigt und vom Benutzer angesteuert werden sollen.

A third but less common possibility is the springboard interface, illustrated in Figure~\ref{fig:figures_apple_springboard}.

% Eine weitere — in Third-Party-Apps nicht so gängige — Möglichkeit ist das Springboard Interface, welches man auf dem nachfolgenden Bild sieht:

\begin{figure}[htbp]
	\centering
		\includegraphics[height=3in]{figures/apple_springboard.png}
	\caption{Springboard Interface}
	\label{fig:figures_apple_springboard}
\end{figure}

The springboard interface is well-known to each iPhone user, because it is the central way to navigate and control the device, in particular starting and managing your apps. 

% Das Springboard Interface ist sofort jedem iPhone Anwender bekannt, da es die gängige und prinzipiell einzige Möglichkeit darstellt um auf dem Gerät zu navigieren und Anwendungen zu starten beziehungsweise zu verwalten.  	

In comparison to the prior presented approaches, it is more graphically oriented and offers the possibility to display a total of 20 elements at one, which can be arranged by the user according to his preferences. 
	
% Im Vergleich zu den beiden vorherigen Ansätzen ist es stärker grafisch orientiert und bietet die Möglichkeit insgesamt 20 verschiedene Elemente zu positionieren, welche beliebig verschoben und nach den Wünschen des Benutzers angeordnet werden können.
	
A reason pro springboard is that it can display a lot of contextual information concerning the future aspect of the navigation, but at the same time provide a clearly-arranged overview.
  
% Es hat den Vorteil, dass man viele kontextbezogene Informationen in die Zukunft darstellen kann und diese gleichzeitig übersichtlich sind, da sie in einem Raster angeordnet werden. 

A disadvantage is that the context of the past cannot be displayed in the springboard view. After selecting an item and navigating to the new view, the user does not get any information of the origin.
However, the designer has to take care that the context to the past does not get lost. He should add this information manually giving the user a higher confidence while navigating through the app.\\
 
A good approach is to combine the springboard interface with the navigation bar concept. The navigation bar could be used to display a button that always leads back to the startscreen, similar to the mechanical button in the iPhone case, which interrupts the current application and sends the user back to the springboard interface.    
A drawback of this solution could be that the user gets confused, if an app uses the same interface then the device itself. Hence, the application springboard shall be visually distinguishable from the iPhone's springboard. But not too much, because it is important that the user associates automatically the springboard metaphor and knows how to use it and thus feels comfortable. 
  
% Ein Nachteil dieser Interface-Lösung ist, dass man den Kontext in die Vergangenheit vollständig verliert, nachdem man einen Punkt annavigiert hat. 

% Hierbei muss im User Interface Design berücksichtigt werden, dass manuell Kontextinformationen hinzugefügt werden müssen, um dem Anwender mehr Sicherheit bei der Bedienung der Anwendung zu bieten. 
 
% Eine gute Lösung dafür ist es in einer eigenen Navigationsleiste dauerhaft auf allen Bildschirmen, die sich in der Hierarchie weiter unten befinden, einen gleich aussehenden Button anzuzeigen (ähnlich dem mechanischen Home-Button an der unteren Seite des Geräts), über den man sofort auf das Springboard Interface zurückspringen kann. 
 
% Ein weiterer Nachteil ist, dass ein Anwender verwirrt sein kann, wenn man innerhalb einer Anwendung das gleiche Interface verwendet, wie das System selber. Hierbei muss man vom Standpunkt des User Experience Design dafür Sorge tragen, dass sich das Interface stark genug von dem eigentlichen Springboard unterscheidet, jedoch nicht so stark, dass ein Anwender jeglichen Bezug zu dieser Metapher verliert.

After weighing the pros and cons, we have come to the conclusion that the springboard interface approach is the best solution for our project.
Especially, the possibility to display a lot of elements simultaneously and the freedom for the user to adapt the order and choice of elements to his own needs are the main reasons why we have opted for the springboard.
 
% Nach dem Abwägen aller Vor- und Nachteile ist die Projektgruppe zu dem Schluss gekommen, dass sich letztere Lösung unter Bezug der an dieser Stelle aufgeführten Diskussion am besten eignet.	
		
\subsubsection{Skeuomorphism}

The increasing popularity of skeuomorphism on digital devices eliminate a further level of abstraction between human and machine and thereby improves the Human-computer interaction (HCI). 

% Skeuomorphismen werden auf digitalen Geräten zunehmend immer beliebter. Sie eliminieren eine zusätzliche Abstraktionsebene zwischen Mensch und Maschine und verbessern somit die HCI (Human–computer interaction).

They are widely accepted among users, because they represent objects, which are well-known from the real world, like notepads, wooden bookshelves or organizers.
	
% Sie werden von Anwendern weitläufig akzeptiert, da sie Objekte aus der Wirklichkeit repräsentieren, die in vielen Fällen den Anwendern bereits ein ganzes Leben geläufig sind (Papierkalender, hölzernes Bücherregal usw.).

Actually, the usage of skeuomorphism (the same applies for other design techniques) do not increase the user experience by definition. Nevertheless, if they are applied in the right context, they could increase the experience by far and suggest the user a feeling of familiarity.  
 
% Skeuomorphismen führen (wie alle anderen eingesetzten Mittel des Designs im übrigen auch) nicht zwangsläufig zu einer Verbesserung der User Experience. Im richtigen Rahmen eingesetzt, können sie das Benutzererlebnis jedoch stark aufwerten und ein geborgenes und altbekanntes Gefühl erwecken.

On the one hand, they should imitate the real world as good as possible to strengthen the user's relation to the application. On the other hand, they should not break or violate interface-guidelines.

% Sie sollten soweit gehen, dass ein Anwender einen stärkeren Bezug zu einer Anwendung hat, sie sollten jedoch nicht zu stark festgelegte Interface-Richtlinien brechen oder sogar verletzen. 

Addressing the mentioned problem of over-designing a skeuomorphism, the project group decided to design the startscreen on the basis of real world objects and each other screen according to the interface guidelines of apple.

% Um einen optimalen Mittelweg zu gehen, hat sich die Projektgruppe entschiedenen den Eingangsbildschirm an wirkliche Objekte anzulehnen und jegliche weiteren Bildschirme so weit wie möglich den User Interface Guidelines von Apple anzupassen.


This is commonly-used approach and it can be found in several apps, which have been awarded for their great user experience, like Groceries by Sophistication Software or Where To? by FutureTap.\\

 % Dieses Verfahren ist durchweg geläufig und man findet es in einigen sehr populären und für das User Experience Design gelobten Apps (z.B. Groceries von ).

Actually, the first thought for the startscreen have been the bulletin boards made of cork. 

% Der erste Gedanke der Projektgruppe waren die an Universitäten geläufigen Pinwände aus Kork.

However, these bulletin boards are not the best choice, because they are used for announcements, ads or requests but not for communication among students, course management or scheduler for the current semester. 
	
 % Diese Idee hat sich jedoch als nicht zu Ende gedacht erwiesen, da Korkwände meistens für Ankündigen, Inserate oder Nachfragen dienen, nicht aber zur Kommunikation zwischen verschiedenen Studenten, zur Kursverwaltung oder als Planer für das laufende Semester.

Design is not only about appealing and good looking interfaces, but about sophisticated and elaborated designed interfaces.

% Design bedeutet nicht, dass etwas gut aussieht, sondern, dass es gut gestaltet und entworfen ist, so dass der Benutzer mit minimalem Aufwand ein maximales Ergebnis erzielen kann.

In consideration of this fact, the corkbackground would be a neat optical gimmick and perhaps would increase user experience, but is not elaborated design and could lead to confusion because of the wrong metaphor. 

% Unter Anbetracht dieser Tatsache wäre ein Korkhintergrund zwar ein nettes optisches Gimmick und würde im ersten Moment vielleicht sogar die User Experience verbessern, es wäre jedoch kein gutes Design und könnte bei bestimmten Personenkreisen aufgrund der falschen Metapher sogar zu Verwirrung führen.

The project group decided against using the cork background based on the reasoning above.

% Die Projektgruppe hat sich aus diesen Gründen strikt dagegen entschieden.

	\begin{figure}[htbp]
		\centering
			\includegraphics[height=2in]{figures/corkboard.png}
		\caption{Cork background}
		\label{fig:figures_corkboard}
	\end{figure}

Another approach focusses more on the typical working methods and environment of students, the project group thoughts about Peter S. and the way he would organize his work. 

% Ein weiterer Denkprozess bezog sich stärker auf die eigentliche Studienverwaltung und fokussierte sich vielmehr auf die Arbeitsweise und -mittel von Studenten.

The conclusion came up that every student works with books and other equipment, that is kept in shelves or lockers.

% Dabei ist nach ausreichender Analyse die pragmatische Schlussfolgerung herausgekommen, dass so ziemlich jeder Student mit Büchern und anderen Arbeitsmitteln arbeitet, die in Regalen oder Schränken aufbewahrt werden.

In most cases they are made of wood or some kind of wood-imitation. 
% Diese sind meistens aus Holz oder einer Nachbildung und in äußerst seltenen Fällen aus anderen Materialien.

Based on this thought and the functionality of the app, the use of wood would be a good choice to represent a real-world object. 
 
% Führt man diesen Gedanken weiter und berücksichtigt die Funktionalität der Anwendung, merkt man, dass auch im wirklichen Leben ein Studienplaner in einem Regal steht, dass man auf einem Schreibtisch ein Mobiltelefon oder einen Computer zum Kommunizieren ablegt und dass dieser Skeuomorphismus angebracht ist und die User Experience verbessert.

% Aus diesem Grund hat sich die Gruppe im ersten Schritt für den folgenden Holzhintergrund entschieden:

There were two choices of wooden background, one lighter and one darker, but more noble texture. Both are shown in Figure~\ref{fig:figures_wood}.

	\begin{figure}[htbp]
		\centering
			\includegraphics[height=2in]{figures/wood.png}
			\includegraphics[height=2in]{figures/wood_dark.png}
		\caption{Wooden background}
		\label{fig:figures_wood}
	\end{figure}

% Nach weiterer intensiver Auseinandersetzung musste im Arbeitsprozess festgestellt werden, dass sich etwas noch nicht stimmig ``anfühlt''.
% 
% Ein Gefühl mag wissenschaftlich schwer greifbar sein und es lässt sich auch sehr schwer argumentieren, ob sich etwas gut oder schlecht anfühlt.
% 
% Fest steht jedoch, dass eine Anwendung auch ein bestimmtes Feeling an den Anwender herüberbringen muss, so dass es auch Spaß macht sie zu betrachten und mit ihr zu arbeiten.
% 
% Diese schwer messbare Variable kann man am besten strichprobenartig mit Hilfe von Usability Tests und gezielten Fragebögen festlegen.
% 
% Hervorzuheben ist, dass sie allerdings eine entscheidende Rolle spielt.

The group decided to use the darker, more noble texture for several reasons, one reason has been the higher contrast to the icons.

% Die Gruppe hat sich aus mehreren Gründen entschieden ein sauberes und edleres Holz zu nehmen, welches außerdem einen stärkeren Kontrast zu den auf dem Bildschirm vorhandenen Icons hat:

The application not only appears to have a higher quality, but simultaneously provides a better usability in difficult situation of light. % 
% Die Anwendung wirkt somit nicht nur hochwertiger, man erzielt gleichzeitig ein besseres Design und der Benutzer kann zum Beispiel in schwierigen Lichtsituationen besser arbeiten.

Eventually, the discussion of the type of texture, its color and structure is just a neat detail but this kind of attention to details is the basis of success of an app.
% Es mag vielleicht ein Detail sein, welche Art von Holz man nimmt, welche Struktur das Holz hat, welche Farbe es besitzt, ob es regelmäßig oder unstrukturiert wirkt.
% 
% Doch gerade diese Details machen den Erfolg einer Anwendung aus.

%\clearpage

%
%
% Part Matthias
%
%


	\subsubsection{Attention to detail}

% 	Wie bisher unschwer zu erkennen war, hat die Arbeitsgruppe sehr detailbesessen gearbeitet. Dies gilt auch für kleinere Aspekte im User Interface, wie zum Beispiel den nachfolgenden Schatten auf dem Holzhintergrund im Eingangsbildschirm:
    As seen previously, the study group worked detailed. This applies for other, smaller aspects, too. For example, the shadow in the user interface which is displayed on a wooden background when entering the access display screen:
  
	\begin{figure}[htbp]
		\centering
			\includegraphics[height=3in]{figures/wood_dark_shadow.png}
		\caption{Dark wooden background with shadow}
		\label{fig:figures_wood_dark_shadow}
	\end{figure}

% 	Vergleicht man diesen direkt mit dem darüberliegenden Hintergrund, so merkt man wahrlich keinen großen Unterschied. Betrachtet man jedoch das Gesamtbild, so wirkt die Anwendung plastischer, der Skeuomorphismus ist stärker, und das angestrebte Ziel eines Regals rückt näher. Insbesondere in der Gesamtkomposition, die am Ende dieser Ausarbeitung betrachtet werden kann, merkt man, dass es sinnvoller ist das Hauptelement deutlicher von der Navigationsleiste zu trennen. Es entsteht ein eindeutiger Eindruck einer Lichtquelle, wie zum Beispiel der Sonne, die von oben auf ein Regal scheint. Die obere Abschlussplatte des Korpus eines Regals wirft in der Wirklichkeit einen Schatten, welcher die direkt darunter liegenden Objekte leicht verdunkelt. Wiederum weiter darunterliegende Objekte sind heller, da der natürlich Schatten eine gewisse physikalisch bestimmte Distanz aufweist.
  If you compare it with the overlaying background you will not notice any serious difference. But if you take a look at the overall picture, the appliance appears more three dimensional. The skeuomorphism is more distinguishable and the aspired shelf is visible. Particularly in the overall composition it seemed more reasonable to separate the main element from the navigation bar. A clear impression evolves of a light source, for example when the sun shines on the shelf from above. The upper plate of the corpus from the shelf casts a shadow, which darkens  all objects that lay underneath. On the other hand, all subjacent objects are brighter because the natural shadow offers a certain physical distance. 

% 	Ein weiterer Punkt, bei dem wir sehr ins Detail gegangen sind, war die Navigationsleiste. Die Standardnavigationsleiste von Apple, welche im UIKit-Framework mitgeliefert wird, wirkt eher wie ein glänzendes Stück etwas, als der Teil eines richtigen Regals. Aus diesem Grund hat sich die Projektgruppe die Arbeit gemacht eine Navigationsleiste zu schaffen, die sich im äußeren nur unwesentlich von Apple’s eigener Navigationsleiste unterscheidet, im Nachhinein aber wie ein richtiges Regal aussieht.
    Another point where we went into detail was the navigation bar. The standard navigation bar from Apple, which is provided by the UIKit-Framework, appears as a shiny thing instead being a part of a real shelf. For this reason we created a navigation bar, which is slightly distinguished from the Apple navigation bar, that appears to look like a real shelf. 

% 	Dieser Prozess begann zu Anfang mit einer extremen Farbe, um die Beschaffenheit und Struktur und dessen Zusammenspiel mit dem eigentlichen Hintergrund zu testen. Ergebnis dieses absichtlichen ``faux-pa'' war ein optimaler Schatten, welcher sich in den Schattenwurf auf dem Hintergrund integriert und eine bestmögliche Diversifizierung in Bezug auf das Hauptinterface bildet.
  At the beginning of this process we took an extreme colour to test the constitution and texture in interaction with the original background. The result was an ideal shadow, which integrates the shadow casting in the background that allows the best possible diversification related to the main interface. 

	\begin{figure}[htbp]
		\centering
			\includegraphics[scale=.7]{figures/pimky.png}
		\caption{Navigation bar draft}
		\label{fig:figures_pimky}
	\end{figure}

% 	Einer der nächsten Schritte war es einen gesunden Farbwert zu finden, welcher einerseits einen ausreichenden Kontrast zu dem Hintergrund hat, andererseits aber nicht zu stark davon abweicht, so dass er immer noch wie ein Teil des Regals aussieht, auf welchen eine Lichtquelle scheint. Ein weiterer Aspekt, welcher berücksichtigt wurde, war die Herausnahme des Glanzes, welcher ansonsten beim Benutzer einen falschen Materialeindruck hinterlassen hätte.
    One of the next steps was to find an optimal colour value. On the one hand it had to provide a sufficient contrast to the background but on the other hand it couldn't deviate heavily from the background because it had to look like a shelf on which a light source is shining. Another aspect, which we had to take into consideration, was the brilliance which we had to take out because it would have given the user a wrong impression of the material. 


	\begin{figure}[htbp]
		\centering
			\includegraphics[scale=.7]{figures/woodNavibar.png}
		\caption{Wooden navigation bar, 1. version}
		\label{fig:figures_woodNavibar}
	\end{figure}

% 	Nach der 1. Version konnte sich die Projektgruppe vorerst einigen, doch etwas stimmte nicht. Das User Interface hat sich noch nicht rund angefühlt und so begann ein neuer Prozess der Verbesserung. Es wurden zu allererst verschiedene andere Farbtöne ausprobiert. Anschließend wurde mit verschiedenen Strukturen gearbeitet, welche allerdings einen zu starken Unterschied und einen zu extremen Effekt erzeugt haben. Schlussendlich hat es die Projektgruppe geschafft sich auf das minimal notwendigste zusätzliche Element in der Navigationsleiste zu konzentrieren: ein dezenter, für einen durchschnittlichen Anwender nicht bewusst wahrnehmbarer Verlauf, welcher einen stärkeren plastischen Eindruck hinterlässt und somit ein besseres Imitat des typischen Regals darstellt.
    The project group could agree on the first version but something was missing. We were not satisfied with the User Interface therefore we started a new process of improvements. At first we tried new colours out. Subsequently, we worked with different structures but they constituted extreme effects, which were leading to too much difference. Finally, the project group could concentrate on the most  essential element in the navigation bar: a decent gradient, which is not perceiveable for the average User but which leaves a vividly impression on the shelf and therefore a better imitation. 

	\begin{figure}[htbp]
		\centering
			\includegraphics[scale=.7]{figures/woodNavibarGlow.png}
		\caption{Wooden navigation bar, 2. version}
		\label{fig:figures_woodNavibarGlow}
	\end{figure}
		
	\subsubsection{Semantical interpretation of icons}
	
% 	Ein weiterer Aspekt, der von der Projektgruppe berücksichtigt wurde ist die eigentliche Bedeutung der Icons. Diese haben allgemein in verschiedenen Kulturen und Regionen der Welt unterschiedliche Bedeutungen und können zu teils starken Missverständnissen führen. Da Stud.IP jedoch für den deutschen Markt ausgelegt ist, konnte sich die Projektgruppe auf die in Europa geläufige Symbolik und dessen Bedeutung konzentrieren.
    Another aspect, which the group took into consideration, was the relevance of the Icons. These have different meanings in different cultures and can lead to misunderstandings. The project group concentrated on the commonly used symbolism in Europe because Stud.IP is designed for the german market. 

% 	Die Semantik von Icons ist unter anderem aus diesem Grund ein nicht zu unterschätzendes Problem bei dem gesamten User Experience Design, da gute Icons mit einer eindeutigen Bedeutung nicht nur Klarheit beim Anwender schaffen können, sondern den allgemeinen Workflow verbessern, den Einstieg in eine neue Anwendung erleichtern und ein Gefühl von Geborgenheit und Verständnis schaffen.
    The semantic of icons is a problem that should not be underestimated in the whole user experience design because good icons with an unambigious meaning can lead to clarity for the user, improve the general workflow, alleviate the access to the application, give you the feeling of security and create understanding. 

% 	Im Nachfolgenden wird auf die vier Haupticons von Stud.IP eingegangen, welche vom Stil her so gewählt wurden, dass sie in das Gesamtbild der Anwendung passen.
    Consecutively, we commited ourselves to the four main icons of Stud.IP, which we choose because they fit into the overall picture of the application. 

	\begin{figure}[htbp]
		\centering
			\includegraphics[]{figures/kalender.png}
		\caption{Calendar icon}
		\label{fig:figures_kalender}
	\end{figure}

% 	Kalender gibt es in verschiedenen Arten: es gibt Tageskalender, Wochenkalender oder Monatskalender. Eines haben sie jedoch gemeinsam: es gibt eine Unterteilung in verschiedene Einheiten (seien es Tage oder Stunden). Diese Unterteilung ist sowohl typisch für traditionelle Kalender auf natürlichem Papier, als auch dessen digitale Counterparts. Aus diesem Grund wurde ein Icon gewählt, welches eine Monatsansicht andeutet. Da volle 30 Tage auf einem Icon zu überladen wirken, wird nur ein Ausschnitt mit noch übersichtlichen neun Tagen im eigentlich Icon dargestellt.

    There are calendar in various modes: a desk calendar, a calendar for a week and a monthly calendar. One thing they all have in common is a classification in various units (days or hours). This classification is typical for traditional calendar on paper and for their digital counterparts. For this reason we choose an icon that indicates a calendar for a month. We took an extract of 9 days and put it into the icon because 30 days appeared over done in it. 

	\begin{figure}[htbp]
		\centering
			\includegraphics[]{figures/kurse.png}
		\caption{Course icon}
		\label{fig:figures_kurse}
	\end{figure}


% 	Kurse sind verschieden, jeder Student hat andere Kurse, je nachdem in welchem Fach er sich ausbildet. Es ist äußerst schwierig einen gemeinsamen Nenner zwischen einer Informatik- und einer Germanistik-Studentin zu finden. Abstrakter gesehen sind Kurse jedoch nichts anderes, als Elemente des Studiums, die nicht unterschiedlicher ausfallen können, trotzdem aber zusammen gehören und für ein erfolgreiches Studium Voraussetzung sind. Aufgrund der Verschiedenheit der einzelnen Studiengänge repräsentieren die dargestellten Objekte einzelne Kurse, welche einen gewissen Zusammenhalt besitzen, der durch das dahinter liegende Blatt symbolisiert wird. Es wurde somit ein Abstraktionsgrad geschaffen, der notwendig ist, der gleichzeitig allerdings nicht so stark ist, dass er an Bedeutung verliert und in Unbehagen beim Anwender ausartet.
     Every student has different courses. It depends on in which faculty he/she is studying. It appeared to be extremely difficult to find a common ground between a computer science student and a german language student. Looking at it in an abstract way courses are nothing more than elements of the academic studies. They are all different but still they belong together and are requirements for a successful academic study. Because of the diversity of the program of studies the presented objects represent single courses, which have coherence, that is symbolized through a sheet behind. We created the icon deliberately abstract but not so much that the meaning gets lost or that the user would feel discomfort.   

	\begin{figure}[htbp]
		\centering
			\includegraphics[]{figures/neuigkeiten.png}
		\caption{News icon}
		\label{fig:figures_neuigkeiten}
	\end{figure}


% 	Neuigkeiten werden oft mit Magazinen, Zeitungen und gedrucktem oder geschriebenen Material assoziert. Die Entscheidung in dieser Hinsicht ist der Projektgruppe daher relativ leicht gefallen, da ein beschriebenes oder bedrucktes Blatt Papier neue Informationen symbolisiert. Gegen Letzteres hat sich die Projektgruppe dagegen entschieden, weil es in das allgemeine Konzept der Anwendung nicht passt.
    News are often associated with magazines, newspapers, printed or written material. Therefore it was easy for the project group to decide that a printed or written paper should symbolize new informations. We decided to take the written paper as an information icon because it fits better in our application design. 

	\begin{figure}[htbp]
		\centering
			\includegraphics[]{figures/post.png}
		\caption{Mail icon}
		\label{fig:figures_post}
	\end{figure}

% 	Mit Post assoziert man oft einen Brief- bzw. Eingangskasten. Eine Truhe, in die neue Sachen hineinfliegen und irgendwann überlaufen, wenn man sie nicht regelmäßig genug überprüft, scheint hier ein geeignetes Stilmittel zu sein. Um das User Experience Design zu verbessern kann man sogar in einer zukünftigen Version *leicht* verschiedene Icons mit unterschiedlicher Anzahl an Briefen anzeigen (analog zu einem digitalen Papierkorb, jedoch mit mehreren Stufen).
	Mail is often associated with a mailbox or a postbox. A coffer in which new things are thrown seemed to be an appropriate stylistic device. To improve the user experience design for future versions you can easily take various icons with different amounts of letters (analogical for a digital trash but with multiple layers). 
	
    \newpage
	\subsection{Shortcuts}
	\label{sec:shortcuts}

    One of the main features in our navigation scheme is the possiblity to add shortcuts to nearly every view of our application.
    It allows the user to customize his start-screen and give him the possibility to create his own customized user experience.
    This feature also gives the user the possibility to customize the start-screen arrangement to fit his own needs, instead of dictating him a specific workflow or icon organisation. So the user can organize the shortcuts according to the focus he will use the app for:\\
    If he uses the app just to get the news of his current lectures, he may just create shortcuts to the particular lecture news section. If he just uses the app to get his current schedule, he doesn't need to create the shortcuts.\\
    \\
    The creation of a new shortcut is as simple as it can be: In every view where it is possible to create a shortcut, we display a bar at the bottom with a + icon:\\

   \begin{figure}[htbp]
        \centering
            \includegraphics[scale=0.4]{figures/screen_mail.png}
            \includegraphics[scale=0.4]{figures/screen_course_details_1.png}
        \caption{Bottom bar with the shortcut button in mail and course view}
        \label{fig:figures_shortcut_bar}
    \end{figure}

    After the user presses this button, he will get a status information, that the new shortcut was created (Figure~\ref{fig:figures_create_shortcut}).
    \newpage

   \begin{figure}[htbp]
        \centering
            \includegraphics[scale=0.4]{figures/screen_create_mail_shortcut.png}
            \includegraphics[scale=0.4]{figures/screen_mail_shortcut.png}
        \caption{Status information and created shortcut on the start-screen}
        \label{fig:figures_create_shortcut}
    \end{figure}

    To make the customized view more intuitive, we decided to put different icons on the start-screen, depending on the view it links to. The shortcut desing to a specific lecture for example has a star on it, like the user should know it from different applications where you have the possibility to create something like shortcuts or bookmarks. If the user creates a shortcut to a specific message, the icon will have a little heart, to symbolize that it depends to something personal, like a mail conversation (Figure~\ref{fig:figures_shortcuts}).

   \begin{figure}[htbp]
        \centering
            \includegraphics[]{figures/kurs.png}
            \includegraphics[]{figures/person.png}
        \caption{Course \& message shortcut icon}
        \label{fig:figures_shortcuts}
    \end{figure}

    The different types of shortcut icons should make it possible to recognize the kind of view which comes next at the first look.
    So the user knows intuitively what kind of information the shortcut links to.

	
	\subsection{News}
    \label{sec:news}

    The news section is a very important part of our application. We tried to compensate the information flood of Stud.IP into this
    small view. The view bundles the current news of all courses the user participates in.

    \begin{figure}[htbp]
        \centering
            \includegraphics[scale=0.4]{figures/screen_news.png}
            \includegraphics[scale=0.4]{figures/screen_file_details.png}
        \caption{News view and file details after clicking the first news}
        \label{fig:figures_news}
    \end{figure}

    From this point the user can navigate directly into the view which is attached to this kind of news. If, for example, a new file was uploaded, the user has the possibility to directly navigate into the file details (Figure~\ref{fig:figures_news}).\\
    The view sorts the news by lectures, so the user has a clearly arranged view of all news. In the Stud.IP application this information is symbolized through icons next to the name of the lecture in the lecture overview. This feature could not be adapted to the iPhone, because of the small screen. Also our kind of news view gives more detailed information. The Stud.IP view just says, that there are new files or forum entries. In contrast, our view shows directly the name of the file, or gives information about the forum thread where new entries were made. This feature should make the inbox more informative, than the original Stud.IP view.
	
	\subsection{Courses}
    \label{sec:courses}

    The detailed view of a course is a summary of the most necessary information needed. The view displays all information from the
    course like course description, dates and the names of the instructors. It should give an detailed overview of the given lecture.
    Additionally it should give the possibility to navigate into the other parts of Stud.Ip courses like forums, the wiki or the uploaded files.
    \newpage

     \begin{figure}[htbp]
        \centering
            \includegraphics[scale=0.4]{figures/screen_course_details_1.png}
            \includegraphics[scale=0.4]{figures/screen_course_details_2.png}
        \caption{Course details}
        \label{fig:figures_course_details}
    \end{figure}

    At the moment, we just implemented the file view, where the user can see an overview of all uploaded files and their details.
    It would be desirable to have a possibility to directly view files like PDF's, to enhance this feature, but there was no time to implement this. Also wiki and forum entries doesn't made it into the prototype. What partially relies to the fact, that we didn't finished our Stud.IP API.

  \section{Summary}

% Schlussfolgernd kann man zusammenfassen, dass die Details, welche vielleicht maximal 20\% des gesamten User Interfaces und allgemeinen Benutzerlebnisses ausmachen, gut 80\% des eigentlichen zeitlichen Aufwands entsprechen. Aber gerade diese kleinen Details, auf welche die wenigsten typischen Benutzer achten, da sie diese nicht bewusst wahrnehmen, machen ein gutes User Experience Design aus. Die Wahrnehmung findet trotzdem auf einer unbewussten Ebene statt und eine Anwendung fühlt sich besser an.
In conclusion, the details, which make up to 20 per cent of the whole User Interface, come up to 80 percent of the time and effort needed. But these small details, which are not recognized by the average user, make up a good user experience design. The perception takes place in an unconscious layer, which makes the user feel comfortable with this application.\\
\\


\begin{figure}[htbp]
	\centering
		\includegraphics[scale=0.4]{figures/Eingangsbildschirm.png}
	\caption{Eingangsbildschirm}
	\label{fig:figures_Eingangsbildschirm}
\end{figure}

Our design process was mostly driven by the created persona and the navigation diagram. The features needed by our persona and the navigation scheme defined by the diagram were our guidelines in the development phase. The prototype we created gives a good impression how our navigation design works. The most significant features are the customizable start-screen and the home button, because they enhance the standard iPhone navigation. With the possibility to create shortcuts and to get to the start-screen from everywhere, the navigation can be very fast without going through all menus to get a specific information. We also tried to make the icon design self-explanatory to enhance the user experience.\\
A poor point is, that our prototype just uses dummy data, because we couldn't finish the API needed to get all the information from Stud.IP. This is caused partially by the developers of Stud.IP, because we didn't get the needed information from them. We learned from this that we waited too long and counted too much on the promised input from data-quest.\\
Even so we are satisfied with our prototype application, because it shows how our navigation scheme is working and what the key features are.\\
\\

% Als Ausblick kann man sagen, dass man sogar noch bei dem Eingangsbildschirm mehr Details verbessern könnte. So sind die Icons zum Beispiel bereits so gewählt, dass sie semantisch Sinn machen, hier ist allerdings noch Verbesserungspotenzial möglich. Das gleiche gilt zum Beispiel für den Button oben links, welcher zur Zeit nur einen Standard-Button aus dem UIKit-Framework repräsentiert und der eine ähnliche Behandlung, wie die Navigationsleiste, genießen kann.
For future prospects it is possible to improve the start-screen. For example, the chosen Icons make sematically sense but they can be improved. The same can be applied on the upper left button. 
Right now, we use a standard button from the UIKit-Framework. 

